<template>
  <!--发送验证码-->
  <div class="root-box">
    <view class="phone_box">
      <view class="phone">手机号</view>
      <input type="number" class="number" placeholder="请输入手机号码" v-model.trim="phone" />
    </view>
    <view class="code_box">
      <view class="code">验证码</view>
      <input type="number" class="code_number" placeholder="请输入验证码" v-model.trim="code" />
      <view class="send_code">
        <text class="countdown_code" v-if="send" @click="sendCode">发送验证码</text>
        <text class="countdown" v-else>{{ number }}s后重发</text>
      </view>
    </view>

     <view class="loginBtn" @click="login">{{btnName}}</view>
  </div>
</template>

<script>
export default {
  props: {
    btnName: {
      type: String,
      default: '登录'
    },
    userphone: {
      type: String,
      default: ''
    },
    changePhone: {
      type: String,
      default: ''
    }
    

  },
  data () {
    return {
      number: 60,
      send: true,
      code: '',
      phone: '',
    }
  },

  mounted () {
    this.phone = this.userphone
  },
  methods: {

    checkPhone() {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone)) {
        uni.showToast({
          title: "请输入有效手机号码",
          icon: "none",
          duration: 2000,
        });
        return false;
      } else {
        return true;
      }
    },

     sendCode() {
      if (this.checkPhone()) {
        this.send = false;
        var _this = this;
        this.getCode();
        let t = setInterval(() => {
          this.number--;
          if (this.number == 0) {
            this.send = true;
           
            clearInterval(t);
            this.number = 60;
          }
        }, 1000);
        if (this.number == 0) {
          clearInterval(t);
        }
      }
    },

    getCode() {
      this.$http.post("/api/send", { phone: this.phone }).then((res) => {
        if (res.data.code == 20000) {
          console.log("发送成功");
        }else{
          uni.showToast({
            title: res.data.msg,
            icon: "none",
            duration: 2000,

          })
        }
      });
    },


    login () {

    

      if(this.checkPhone()){
        if(this.code == ''){
          uni.showToast({
            title: "请输入验证码",
            icon: "none",
            duration: 2000,
          })
          return false;
        }

        // check code
        var data = {
          phone: this.phone,
          code: this.code,

        }


          console.log(data)


        this.$http.post("/api/checkSend", data).then((res) => {
          console.log(res)
          if (res.data.code == 20000) {
            this.sendRightInfo();
          } else {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 2000,
            });
          }
        });

      }

         
    },

    sendRightInfo () {
     
      var sendData = {
        phone: this.phone,
        captcha: this.code

      }
      // 请求接口
      if(this.changePhone){
      
          this.$emit('changePhoneHandle',sendData)
      }else{
       
          this.$emit('childFn',sendData)
      }
      
      
    }
  }
  
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>